<template>
<Row>
  <!-- <dtable :columns="columns" :data-all="dataAll" :data-show="dataShow" :loading="loading" add edit del op check @refresh="getall()" @show="show" @add="add" @del="del" @edit="edit" /> -->
  <BaseTable ck op pager front :total="total" @add="addhandler" @delete="deletehandler" @update="updatehandler" @refresh="getall" :columns="columns" :data="dataAll"></BaseTable>
  <Modal v-model="editData" title="资源信息" :loading="loading" :mask-closable="false" class="editm" @on-ok="asyncOK" @on-cancel="asyncCancel">
    <Form ref="editForm" :model="formItem" :label-width="80" :rules="ruleValidate">
      <Form-item label="名称" prop="Name">
        <Input
            v-model="formItem.Name"
            placeholder="请输入"
          ></Input>
      </Form-item>
      <Form-item label="图标" prop="Icon">
        <Input
            v-model="formItem.Icon"
            placeholder="请输入"
            :icon="formItem.Icon"
          ></Input>
      </Form-item>
      <Form-item label="排序" prop="Seq">
        <Input
            v-model.number="formItem.Seq"
            placeholder="请输入"
          ></Input>
      </Form-item>
      <Form-item label="类别" prop="Type">
        <Radio-group v-model.number="formItem.Type">
          <Radio :label="0">模块</Radio>
          <Radio :label="1">功能</Radio>
          <Radio :label="2">页面</Radio>
          <Radio :label="3">操作标签</Radio>

          <!-- <Radio :label="1">页面目录</Radio>
          <Radio :label="0">API功能</Radio>
          <Radio :label="2">操作标签</Radio> -->
        </Radio-group>
      </Form-item>
      <Form-item v-show="formItem.Type===3" label="api路径" >
        <Input
            v-model="formItem.Url"
            placeholder="请输入"
          ></Input>
      </Form-item>
      <Form-item v-show="formItem.Type===2" label="跳转path" >
        <Input
            v-model="formItem.Path"
            placeholder="请输入"
          ></Input>
      </Form-item>
      <Form-item v-show="formItem.Type === 3" label="事件">
        <Input
            v-model.number="formItem.Event"
            placeholder="请输入"
          ></Input>
      </Form-item>
      <Form-item label="是否隐藏" prop="Hiden">
        <i-switch v-model="formItem.Hiden" size="large">
          <span slot="open">隐藏</span>
          <span slot="close">不隐藏</span>
        </i-switch>
      </Form-item>
      <Form-item label="父目录" prop="Pid">
        <Select
            v-model="formItem.Pid"
            :disabled="isMenu"
          >
            <Option 
              v-for="item in parentRes" 
              :key="item.Id" 
              :value="item.Id"
            >{{ item.Name }}</Option>
          </Select>
      </Form-item>
      <Form-item label="说明" prop="Remark">
        <Input
            v-model="formItem.Remark"
            type="textarea"
            :autosize="{minRows: 2,maxRows: 5}"
            placeholder="请输入..."
          >
        </Input>
      </Form-item>
    </Form>
  </Modal>
</Row>
</template>

<script>
import { mapMutations, mapGetters, mapState } from 'vuex';
import { inputString } from '@/common/utils';
import dtable from '@/components/table/dtable.vue';
import BaseTable from '@/components/table/table.vue';
export default {
  components: {
    dtable,
    BaseTable
  },
  data () {
    return {
      loading: false,
      columns: [
        {
          title: ' ',
          type: 'index',
          with: 50
        },
        {
          title: '名称',
          key: 'Name',
          sortable: true
        },
        {
          title: '类别',
          key: 'Tname',
          sortable: true
        },
        {
          title: '父路径',
          key: 'Pname',
          sortable: true
        },
        {
          title: '排序',
          key: 'Seq',
          sortable: true
        },
        {
          title: 'ApiUrl',
          key: 'Url',
          sortable: true
        },
        {
          title: 'Icon',
          key: 'Icon',
          render: (h, params) => {
            return h('Icon', {
              props: {
                type: params.row.Icon
              }
            });
          }
        },
        {
          title: '事件',
          key: 'Event'
        },
        {
          title: '备注',
          key: 'Remark'
        }
      ],
      dataShow: true, // 是否显示表格数据查看表单
      dataAll: [],
      spinShow: false,
      editData: false,
      addid: 0,
      formItem: {
        Name: '',
        Url: '',
        Icon: 'md-apps',
        Hiden: false,
        Type: 0,
        Seq: 100,
        Pid: '0',
        Remark: '',
        Event: '',
        Path: ''
      },
      ruleValidate: {
        Name: [
          {
            required: true,
            message: '名称不能为空',
            trigger: 'blur'
          }
        ],
        Url: [
          {
            required: true,
            message: '路径不能为空',
            trigger: 'blur'
          }
        ],
        Icon: [
          {
            required: true,
            message: 'logo不能为空',
            trigger: 'change'
          }
        ]
      },
      total: 0,
      pr: []
    };
  },
  computed: {
    ...mapState(['isLogin', 'captchaUrl', 'cptId', 'msg']),
    // filiterTableDate () {
    //   let e = this.dataAll.slice();
    //   let keys = this.searchKey;
    //   let filterData = function (element) {
    //     if (keys === '') {
    //       return true;
    //     }
    //     for (let o in element) {
    //       if (String(element[o]).indexOf(keys) >= 0) {
    //         return true;
    //       }
    //     }
    //     return false;
    //   };
    //   let fdata = e.filter(filterData);
    //   this.total = fdata.length;
    //   return fdata;
    // },
    // curTableData () {
    //   let from = this.pageSize * (this.current - 1);
    //   let to = from + this.pageSize;
    //   return this.filiterTableDate.slice(from, to);
    // },
    //      父资源
    parentRes () {
      this.pr.length = 0;
      let pr = this.pr;
      switch (this.formItem.Type) {
      case 0:
        pr.push({
          Id: '0',
          Name: '根模块'
        });
        break;
      case 1:
        for (let e in this.dataAll) {
          if (this.dataAll[e].Type === 0) {
            pr.push({
              Name: this.dataAll[e].Name,
              Id: this.dataAll[e].Id
            });
          }
        }
        break;
      case 2:
        for (let e in this.dataAll) {
          if (this.dataAll[e].Type === 1) {
            pr.push({
              Name: this.dataAll[e].Name,
              Id: this.dataAll[e].Id
            });
          }
        }
        break;
      case 3:
        for (let e in this.dataAll) {
          if (this.dataAll[e].Type === 2) {
            pr.push({
              Name: this.dataAll[e].Name,
              Id: this.dataAll[e].Id
            });
          }
        }
        break;
      }
      return pr;
    },
    isMenu () {
      if (Number(this.formItem.Type) !== 0) {
        return false;
      } else {
        return true;
      }
    }
  },
  watch: {},
  mounted () {
    this.getall();
  },
  methods: {
    addhandler () {
      this.addid = 1;
      this.$refs['editForm'].resetFields();
      this.editData = true;
    },
    deletehandler (params) {
      // DeleteResouce2s
      console.log(params.length);
      if (params.length === 0) {
        this.$Message.warning('请选择一条数据操作！');
      } else if (params.length > 0) {
        this.$Modal.confirm({
          title: '操作确认',
          content: '删除后可能会影响其它功能使用，确认删除选中的数据吗？',
          onOk: () => {
            this.$api.DeleteResouce2s(params).then(res => {
              this.$Message.info('删除成功！');
              this.getall();
            });
          }
        });
      }
    },
    updatehandler (params) {
      // console.log(params);
      if (params.length !== 1) {
        this.$Message.warning('请选择一条数据操作！');
      } else {
        this.addid = 0;
        this.formItem = params[0];
        this.editData = true;
      }
    },
    getall () {
      this.loading = true;
      // this.$api.getResource().then(res => {
      this.$api.GetAllResouce2().then(res => {
        if (!res.error) {
          console.log(res.Data);
          this.dataAll = res.Data;
          this.total = res.Data.length;
        } else {
          this.$Message.error(res.message);
        }
        this.loading = false;
      });
    },
    show (row) {
      this.showItem = row;
      this.showData = true;
    },
    asyncOK () {
      this.$refs['editForm'].validate(valid => {
        if (valid) {
          if (this.addid === 0) {
            // this.$api.updateResource(this.formItem).then(res => {
            this.$api.UpdateResouce2(this.formItem).then(res => {
              if (!res.error) {
                this.getall();
                this.$Message.success(res.message);
              } else {
                this.$Message.error(res.message, 4);
              }
            });
          } else if (this.addid === 1) {
            // this.$api.addResource(this.formItem).then(res => {
            this.$api.AddResouce2(this.formItem).then(res => {
              if (!res.error) {
                this.getall();
                this.$Message.success(res.message);
              } else {
                this.$Message.error(res.message, 4);
              }
            });
          }
          setTimeout(() => {
            this.editData = false;
          }, 500);
        } else {
          this.$Message.error('表单验证失败!');
        }
      });
    },
    asyncCancel () {
      this.getall();
    }
    // del (row) {
    //   // console.log(row);
    //   this.$api.deleteResource(row).then(res => {
    //     if (!res.error) {
    //       this.getall();
    //       this.$Message.success(res.message);
    //     } else {
    //       this.$Message.error(res.data.message, 4);
    //     }
    //   });
    // }
  }
};
</script>
